<template>
	<div class="login">
		<div class="start" v-if="isStart">
			<img src="../../static/start.png">
			<p>曼巴健身</p>
		</div>
		<!-- 授权页面 -->
		<div class="fale-img" v-if="!isStart">
			<!-- <p class="login-tip">*主要服务于健身房教练与会员</p> -->
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="top-img">
				<img src="../../static/h2.png">
			</button> -->
			<div class="menu-tab">
				<ul class="list-menu">
					<li>
						<p><i class="hicon hicon-6" @click="goUrl('/pagesA/tourist/one')"></i></p>
						<p>预约历史</p>
					</li>
					<li @click="goUrl('/pagesA/tourist/two')">
						<p><i class="hicon hicon-7"></i></p>
						<p>我的课程</p>
					</li>
					<li>
						<p><i class="hicon hicon-9" @click="goUrl('/pagesA/tourist/three')"></i></p>
						<p>个人资料</p>
					</li>
				</ul>
			</div>
			<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="ad-img">
				<image style="width: 100%;"
					src="../../static/h1.jpg"
					mode="widthFix"
				/> 
			</button>
			<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="log-btn">登录</button> -->
		</div>
	</div>
</template>

<script>
import { wxLogin }  from '@/api/userApi'
import {mapGetters} from 'vuex'
import {getStore, setStore} from '@/util/service'
export default {
	data () {
		return {
			isStart: true
		}
	},
	computed:{
    ...mapGetters(['userInfo', 'uniToken'])
	},
	onShow () {
		setTimeout(() => {
			this.isStart = false
		}, 500)
	},
	onLoad () {
		if (this.uniToken != '') {
			if (this.userInfo.roleCode) {
				uni.reLaunch({
					url: '/pages/preOrder/preOrderHome',
				})
			} else {
				uni.reLaunch({
					url: '/pages/home/index',
				})
			}
		} 
	},
	methods: {
		// 登录相关
		getPhoneNumber (e) {
			// 会员登录
			if(e.detail.code){
				this.login(e.detail.code)
			}
			// 教练登录
			// this.loginCoach()
		},
		loginCoach () {
			this.$store.commit('user/SET_TOKEN', 'eyJ0eXAiOiJqd3QiLCJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxNTk4MDI1NjQwMCIsInVzZXJJZCI6MTc4Njc0MTU4NjAyODgyMjUyOSwibG9naW5OYW1lIjoiMTU5ODAyNTY0MDAiLCJuYW1lIjoi5p2O5ZubIiwicm9sZXMiOlsiQ09BQ0giXSwicm9sZUNvZGVzIjpbXSwicGVybWlzc2lvbnMiOltdLCJleHAiOjE3MTU3OTcwNzksIm5iZiI6MTcxNTc4NTk3OX0.1XlFQUSeyjVp5oIPEoiFRKKXOZUNgVd-JkFPlzI4dC-oZB5gqX6ljNxwXaw6BMxTdm0VWS1sVu8QLNG7FVE-kQ')
			this.$store.commit('user/SET_ROLE', ['COACH'])
			this.$store.dispatch('user/CoachInfo', '').then(response => {
				console.log(response.data)
				uni.reLaunch({
					url: '/pages/preOrder/preOrderHome',
				})
			})
		},
		login (phoneCode) {
			var self = this
			uni.login({
				provider: 'weixin',
				success: function (res) {
					var js_code = res.code	
					var params = {
						code: js_code
					}
					wxLogin(params).then(result => {
						setStore('openId', result.data.openId)
						var userParams = {
							openId: result.data.openId,
							code: phoneCode
						}
						self.$store.dispatch('user/Login',userParams).then(resData => {
							// console.log(resData)
							if(resData.code == 200){
								if(resData.data.loginRes.ext){
									self.$store.dispatch('user/CoachInfo', '').then(response => {
										// console.log(response.data)
										uni.reLaunch({
											url: '/pages/preOrder/preOrderHome',
										})
									})
								} else {
									self.$store.dispatch('user/MemberInfo', '').then(response => {
										uni.reLaunch({
											url: '/pages/home/index',
										})
									})
								}
							}else{
								self.uShowToast(resData.msg)
							}
						})
					}) 
				}
			})
		}
	}
}
</script>

<style lang="scss">
.login {
	// background: #F7F7F7;
	.log-btn{
    width: 120rpx;
		height: 120rpx;
		background: #68cb73;
		border-radius: 50%;
		border: 2px solid #FFFFFF;
		font-weight: 500;
		font-size: 24rpx;
		color: #FFFFFF;
		line-height: 120rpx;
		text-align: center;
		position: fixed;
		right: 40rpx;
		bottom: 180rpx;
		z-index: 10;
  }
	.login-tip{
		font-size: 22rpx;
		text-align: right;
	}
	.start{
		width: 185rpx;
		height: 157rpx;
		position: fixed;
		left: 50%;
		top: 50%;
		margin-left: -93rpx;
		margin-top: -77rpx;
		text-align: center;
		img{
			width: 116rpx;
			height: 116rpx;
		}
		p{
			width: 185rpx;
			height: 31rpx;
			font-weight: 500;
			font-size: 30rpx;
			color: #000000;
			line-height: 56rpx;
			margin-top: 6rpx;
		}
	}
	.fale-img{
		width: 702rpx;
		margin: 0 auto;
		.top-img{
			width: 702rpx;
			height: 188rpx;
			margin: 10rpx 0 24rpx;
			padding: 0;
			border: none;
			img{
				width: 702rpx;
				height: 188rpx;
			}
		}
		.ad-img{
			width: 702rpx;
			height: 1140rpx; 
			padding: 0;
			border: none;
			outline: none;
		}
	}
	.hicon{
		width: 84rpx;
		height: 84rpx;
		display: inline-block;
		position: relative;
		margin-bottom: 8rpx;
		margin-top: 32rpx;
	}
	.hicon-6{
		background: url('../../static/icon-1.png') no-repeat 0 0;
		background-size: cover;
	}
	.hicon-7{
		background: url('../../static/icon-2.png') no-repeat 0 0;
		background-size: cover;
	}	
	.hicon-8{
		background: url('../../static/icon-3.png') no-repeat 0 0;
		background-size: cover;
	}	
	.hicon-9{
		background: url('../../static/icon-4.png') no-repeat 0 0;
		background-size: cover;
	}		
	.menu-tab{
		width: 100%;
		height: 188rpx;
		// height: 148rpx;
		background: url('https://newmefit.cn/resource/gym/base/base8.png') no-repeat 0 0;
		background-size: cover;
		border-radius: 25rpx;
		margin-bottom: 24rpx;
		.list-menu{
			display: flex;
			li{
				width: 25%;
				text-align: center;
				p{
					font-size: 24rpx;
					color: #1E1E1E;
				}
			}
		}
	}
}
</style>
